<template>
	<!-- 投票详情 -->
	<view class="bg-white">
		<view class="top_img w-100">
			<image class="rounded-0" :src="infoCont.activity_img_4" style="width: 100%; height: 323rpx;" mode=""></image>
			<text class="cup_state font-sm text-center">{{ infoCont.state == 1 ? '投票进行中' : '投票已结束' }}</text>
		</view>
		<view class="conpany_cont p-2 text-center">
			<view class="rank_tit h4 my-2 c_blue flex align-center justify-center">{{ infoCont.prize.prize_title }}</view>
			<view class="logo m-auto mt-4">
				<view class="num text-left font flex align-center">
					<image src="@/static/img2/home/cup_num.png" mode="aspectFit"></image>
					<text class="ml-1">{{ infoCont.id }}</text>
				</view>
				<image :src="infoCont.company_logo" mode="aspectFit"></image>
			</view>
			<view class="title mt-3">
				<text class=" h4 font-weight-bold">{{ infoCont.company_name }}</text>
				<text class="tag font_22 mr-1" v-for="(label, index) of infoCont.company_label" :key="index">{{ label }}</text>
			</view>
			<view class="c_blue h6">{{ infoCont.company_slogan }}</view>
			<view class="count flex justify-around mt-2 p-2 font">
				<view class="count_item">
					<view class="c_blue">当前排名</view>
					<view class="num">{{ infoCont.rank }}</view>
				</view>
				<view class="count_item">
					<view class="c_blue">票数</view>
					<view class="num">{{ infoCont.record.nums }}</view>
				</view>
				<view class="count_item">
					<view class="c_blue">距上一名</view>
					<view class="num">{{ infoCont.subtract || 0 }}</view>
				</view>
			</view>
			<view class="button_box my-4 flex justify-center align-center">
				<text class="btn font">{{ infoCont.record.nums }}</text>
				<text class="btn font" @click="voteChange">给TA投票</text>
				<button open-type="share" class="btn font active">分享拉票</button>
			</view>
			<view class="share_text font_22 c_9 pb-2">点击右上角“···”将链接分享至朋友圈，获取更多支持</view>
		</view>
		<view class="p-2 pb-5">
			<view class="">
				<text class="h4">参评口号</text>
				<view class="font_24 my-2 text-indent">{{ infoCont.company_slogan }}</view>
			</view>
			<view class="">
				<text class="h4">光能杯寄语</text>
				<view class="font_24 my-2 text-indent">{{ infoCont.company_sendword }}</view>
			</view>
			<view class="">
				<text class="h4">企业简介</text>
				<view class="font_24 my-2 text-indent">{{ infoCont.company_desc }}</view>
			</view>
			<button class="bottom_share text-white font mt-5" open-type="share">分享拉票</button>
		</view>
		<u-popup mode="center" :show="loginShow" @close="loginShow = false" :closeOnClickOverlay="false">
			<view class="login_popup p-5">
				<view class="font">请登录后参与投票</view>
				<button class="font mt-3" type="primary" @getphonenumber="authLogin" open-type="getPhoneNumber">登录</button>
			</view>
		</u-popup>
		<!-- 裁剪分享时图片的canvas -->
		<canvas canvas-id="canvas" style="position: absolute; top: -1000px; left: -1000px;width: 225px; height: 180px;"></canvas>
	</view>
</template>

<script>
import { voteCompanyDetails, voteActivity } from '@/api/my/gnb_apply.js';
import util from '@/common/js/util.js';
export default {
	data() {
		return {
			loginShow: false,
			prizeId: '', //奖项id
			companyId: '', //企业id
			infoCont: {},
			activityId: '' //活动id
		};
	},
	//分享到聊天
	onShareAppMessage(res) {
		// return {
		// 	title: this.infoCont.company_name + '-光能杯评选',
		// 	path: '/subPages/my/gnb_vote/vote_detail?prize_id=' + this.prizeId + '&company_id=' + this.companyId + '&activityId=' + this.activityId,
		// 	imageUrl: this.infoCont.company_logo
		// };
		let shareMessage = {
			title: this.infoCont.company_name + '-光能杯评选',
			path: '/subPages/my/gnb_vote/vote_detail?prize_id=' + this.prizeId + '&company_id=' + this.companyId + '&activityId=' + this.activityId,
			imageUrl: this.infoCont.company_logo
		};
		return new Promise((resolve, reject) => {
			uni.showLoading({
				title: '请求分享数据中...',
				icon: 'none'
			});
			util.makeCanvas(shareMessage.imageUrl)
				.then(imgPath => {
					console.log('===', imgPath);
					uni.hideLoading();
					resolve({
						title: shareMessage.title,
						path: shareMessage.path,
						imageUrl: imgPath
					});
				})
				.catch(err => {
					// console.log('err', err);
					uni.hideLoading();
					resolve(shareMessage);
				});
		});
	},

	// 分享到朋友圈
	onShareTimeline() {
		return {
			title: this.infoCont.company_name + '-光能杯评选',
			path: '/subPages/my/gnb_vote/vote_detail?prize_id=' + this.prizeId + '&company_id=' + this.companyId + '&activityId=' + this.activityId,
			imageUrl: this.infoCont.company_logo
		};
	},
	onShow() {
		if (!uni.getStorageSync('userInfo').hasLogin) {
			this.loginShow = true;
		}
	},
	onLoad(option) {
		this.prizeId = option.prize_id;
		this.companyId = option.company_id;
		this.activityId = option.activityId;
		this.info();
		// 分享
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	methods: {
		info() {
			let msg = {
				uid: uni.getStorageSync('userInfo').userId,
				prize_id: this.prizeId,
				company_id: this.companyId,
				activity_id: this.activityId
			};
			voteCompanyDetails(msg).then(res => {
				console.log('详情', res);
				if (res.code == 0) {
					this.infoCont = res.data;
				} else {
					console.log('获取企业投票详情失败', res, msg);
				}
			});
		},
		// 点击列表未登录先拉起登录后再跳转
		authLogin(e) {
			if (uni.getStorageSync('userInfo').hasLogin) return;
			if (e.detail.errMsg === 'getPhoneNumber:ok') {
				this.getLogin(e.detail.code)
					.then(res => {
						uni.$u.toast('授权登录成功');
						this.loginShow = false;
					})
					.catch(err => {
						console.log('登录失败');
					});
			} else {
				uni.showToast({
					title: '授权失败,请登录后查看',
					icon: 'none'
				});
			}
		},
		// 投票
		voteChange() {
			let msg = {
				activity_id: this.activityId,
				prize_id: this.prizeId,
				record_id: this.infoCont.record.record_id,
				uid: uni.getStorageSync('userInfo').userId
			};
			voteActivity(msg).then(res => {
				if (res.code == 0) {
					uni.$u.toast(res.data.msg);
					this.infoCont.record.nums = res.data.randnum;
				} else {
					uni.$u.toast(res.msg);
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.c_blue {
	color: #163566;
}
.top_img {
	position: relative;
	.cup_state {
		z-index: 9;
		color: #ffe0a7;
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		margin-left: -65rpx;
	}
}
.rank_tit::before,
.rank_tit::after {
	content: '';
	background: url('@/static/img2/home/cup_titi.png') no-repeat;
	background-size: 100%;
	width: 30rpx;
	height: 30rpx;
	display: inline-table;
	margin: 0 10rpx;
}
.logo {
	width: 60%;
	border: 1px solid #666;
	position: relative;
	.num {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 9;
		background-color: #dfe5fa;
		padding: 5rpx;
		border-bottom-right-radius: 10rpx;
		image {
			width: 45rpx;
			height: 45rpx;
		}
	}
	image {
		width: 100%;
		height: 160rpx;
	}
}
.title {
	position: relative;
	.tag {
		border: 1px solid #dcb68c;
		color: #dcb68c;
		position: absolute;
		top: -10rpx;
	}
}
.count {
	background-color: #f7f7f7;
	.count_item {
		width: calc(100% / 3);
		border-right: 1px solid #163566;
		box-sizing: border-box;
		.num {
			color: #fcad53;
		}
	}
	.count_item:last-child {
		border: 0;
	}
}
.button_box {
	.btn {
		border: 1px solid #163566;
		padding: 15rpx 20rpx;
		min-width: 150rpx;
	}
	.btn:nth-child(1) {
		border-right: 0;
	}
	.btn:nth-child(2) {
		border-right: 0;
	}
	button {
		width: 160rpx;
		height: 72rpx;
		line-height: 72rpx;
		padding: 0 !important;
		margin: 0;
		border-radius: 0;
	}
	.active {
		background-color: #163566;
		color: #f7f7f7;
	}
}
.share_text {
	border-bottom: 1px dashed #999;
}
.bottom_share {
	width: 260rpx;
	background-color: #d9b88c;
}
.login_popup {
	button {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
	}
}
</style>
